<template>
  <div class="container">
    <div class="left">
      <el-input placeholder="输入关键字进行过滤" v-model="filterText">
      </el-input>

      <el-tree
        v-loading="loading"
        element-loading-text="拼命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgb(34, 38, 83 )"
        class="filter-tree"
        :data="data"
        :props="defaultProps"
        default-expand-all
        :filter-node-method="filterNode"
        ref="tree"
      >
      </el-tree>
    </div>
    <div class="right">
      <div class="rt">
        <div class="truck">
          <span>卡车名：卡车1号</span>
          <span
            >是否运行上线：<el-switch
              v-model="value"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch
          ></span>
        </div>
        <div class="truck">
          <span>卡车名：卡车2号</span>
          <span
            >是否运行上线：<el-switch
              v-model="value"
              active-color="#13ce66"
              inactive-color="#ff4949"
            >
            </el-switch
          ></span>
        </div>
      </div>
      <div class="rm">
        <Echarts
          :isAxisChart="true"
          :chartData="lineData"
          style="width: 100%; height: 100%"
        />
      </div>
    </div>
    <!-- <el-backtop
      target=".page-component__scroll .el-scrollbar__wrap"
    ></el-backtop> -->
  </div>
</template>

<script>
export default {
  name: 'DemoTruck',

  data() {
    return {
      loading: false,
      filterText: '',
      data: [],
      defaultProps: {
        children: 'children',
        label: 'label',
      },
      lineData: {
        xData: ['Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat', 'Sun'],
        series: [
          {
            data: [150, 230, 224, 218, 135, 147, 260],
            type: 'line',
          },
          {
            data: [100, 300, 150, 400, 300, 250, 97],
            type: 'line',
          },
        ],
      },
      value: true,
    };
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val);
    },
  },
  mounted() {
    this.queryTreeData();
  },

  methods: {
    queryTreeData() {
      this.loading = true;
      this.$http
        .getTruckTreeinfo()
        .then((res) => {
          this.data = res.data;
          this.loading = false;
        })
        .catch((err) => {});
    },
    filterNode(value, data) {
      if (!value) return true;
      return data.label.indexOf(value) !== -1;
    },
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  .left {
    width: 25%;
    margin-right: 50px;
    .el-input {
      margin-bottom: 20px;
    }
  }
  .right {
    flex: 1;
    background: #070c3b;
    .rt {
      width: 100%;
      color: white;
      .truck {
        width: 50%;
        height: 50px;
        margin-bottom: 10px;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(6px);
        box-shadow: 1px 1px 5px white;
        border-top: 1px solid rgba(92, 142, 216, 0.5);
        border-left: 1px solid rgba(255, 255, 255, 0.5);
        display: inline-flex;
        justify-content: space-around;
        align-items: center;
      }
    }
    .rm {
      width: 100%;
      height: 350px;
      background: rgba(255, 255, 255, 0.1);
      backdrop-filter: blur(6px);
      box-shadow: 1px 1px 5px white;
      border-top: 1px solid rgba(92, 142, 216, 0.5);
      border-left: 1px solid rgba(255, 255, 255, 0.5);
      // background: rgb(255, 255, 255);
      margin: 50px auto;
      padding: 20px;
      box-sizing: border-box;
    }
  }
}
</style>
